import { useQuasar } from '@teld/q-components';
import { createNameSpace } from 't/common/utils';
import { computed, defineComponent, watch } from 'vue';
import HelpPopover from '../help-popover';
import Label from '../label';
import styles from './index.module.scss';
import './index.scss';

export default defineComponent({
  name: createNameSpace('label-prefix-wraper'),
  props: {
    ...HelpPopover.props,
    label: {
      type: String,
      default() {
        return '';
      },
    },
    hideLabel: {
      type: Boolean,
      default() {
        return false;
      },
    },
    readonly: {
      type: Boolean,
      default() {
        return false;
      },
    },
    labelType: {
      type: String,
      default() {
        return '';
      },
    },
    labelPosition: {
      type: String,
      default() {
        return 'left';
      },
    },
    required: {
      type: Boolean,
      default() {
        return false;
      },
    },
    labelProps: {
      type: Object,
      default() {
        return {};
      },
    },
    icon: String,
    inBody: {
      type: Boolean,
      default() {
        return false;
      },
    },
    maxHeight: String,
    maxWidth: String,
  },
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    const $q = useQuasar();

    expose();

    watch(
      () => {
        return [];
      },
      (a, b) => {},
    );

    let labelPosition = computed(() => {
      if ($q.platform.is.mobile) {
        return 'top';
      }
      return props.labelPosition;
    });

    return () => {
      let a = [];

      if (!props.hideLabel && props.label) {
        let e = (
          <Label visible={!props.hideLabel} {...props.labelProps}>
            {props.label}
          </Label>
        );
        a.push(e);
      }
      if (
        !!props.helpConf &&
        (!props.hideLabel || props.labelType !== 'input')
      ) {
        if (props.required && !props.hideLabel && !props.readonly) {
          a.push(<span class={'t-label-required-star'}></span>);
        }
        let e = (
          <HelpPopover
            icon={props.icon}
            helpConf={props.helpConf}
            helpTooltip={props.helpTooltip}
            helpPlacement={props.helpPlacement}
            helpMore={props.helpMore}
            maxHeight={props.maxHeight}
            maxWidth={props.maxWidth}
            helpMorePopup={props.helpMorePopup}
            helpMoreLink={props.helpMoreLink}
            helpMoreLinkHrefStatic={props.helpMoreLinkHrefStatic}
            helpMoreLinkHrefExp={props.helpMoreLinkHrefExp}
            helpEffect={props.helpEffect}
            onHelpClickHandler={props.onHelpClickHandler}
            inBody={props.inBody}
          />
        );
        a.push(e);
      }

      let e = slots?.default?.();
      if (a.length && (!props.hideLabel || props.labelType !== 'input')) {
        e = (
          <div
            class={[
              'tr-label-prefix-wraper',
              labelPosition.value === 'left' && 'tr-label-prefix-wraper-left',
              styles.module,
              props.labelType === 'help' && 'tr-label-prefix-wraper-line',
            ]}
          >
            {
              <span
                class={[
                  'tr-label-prefix',
                  props.required &&
                    !props.hideLabel &&
                    !props.readonly &&
                    't-label-required',
                  props.helpConf && 'tr-has-helpConf',
                ]}
              >
                {a}
              </span>
            }
            {e}
          </div>
        );
      }
      if (Array.isArray(e) && e.length === 1) {
        e = e[0];
      }

      return e;
    };
  },
});
